<template>
  <div>
    <div v-if="Props.airportData != null">
      <div class="chart-wrapper" style="width: 360px" v-if="Props.showHeader">
        <!-- <el-tooltip :content="Props.airportData.sectorReason" placement="top"> -->
        <el-button type="info" size="small" link icon="Promotion">
          总架次: <b>{{ Props.airportData.total }}</b></el-button
        >
        <!-- </el-tooltip> -->
        <div>
          <el-button
            type="info"
            link
            @click="refreshChart()"
            icon="Refresh"
          ></el-button>
          <el-button
            type="info"
            link
            @click="showRaw()"
            icon="Document"
          ></el-button>
          <!-- <el-button
            type="info"
            link
            @click="isBar = !isBar"
            icon="Switch"
          ></el-button> -->
          <el-button
            type="info"
            link
            @click="download()"
            icon="Download"
          ></el-button>
        </div>
      </div>
      <!-- <div style="width: 600px; height: 600px"> -->
      <v-chart
        v-if="showChart"
        :option="option"
        ref="chart"
        :init-options="{ width: 360, height: 300 }"
      />
      <!-- autoresize -->
      <!-- </div> -->
    </div>

    <el-empty v-else />
  </div>
</template>

<script setup>
// import echarts
import * as echarts from "echarts/core";
import { SVGRenderer, CanvasRenderer } from "echarts/renderers";

import { BarChart, LineChart } from "echarts/charts";
import { PolarComponent, TooltipComponent } from "echarts/components";
import { LabelLayout } from "echarts/features";

// import vue echarts
import VChart, { THEME_KEY } from "vue-echarts";
import { ElMessageBox, ElInput } from "element-plus";
import useCommonStore from "@/store/common.js";
import useFlowStore from "@/store/flow.js";

// import vue apis
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";

echarts.use([
  // SVGRenderer,
  CanvasRenderer,
  BarChart,
  LineChart,
  PolarComponent,
  TooltipComponent,
  LabelLayout,
]);

const commonStore = useCommonStore();
const flowStore = useFlowStore();

const Props = defineProps({
  airportData: {
    type: Object,
    default: null,
  },
  showHeader: {
    type: Boolean,
    default: true,
    required: false,
  },
});

const chart = ref();
const showChart = ref(true);
// const isBar = ref(true);

const refreshChart = async () => {
  showChart.value = false;
  await nextTick();
  showChart.value = true;
  await nextTick();
  if (chart == null || chart.value == null) {
    return null;
  } else {
    chart.value.resize();
  }
};

const showRaw = () => {
  ElMessageBox({
    title: "机场数据: " + Props.airportData.moment,
    message: h(
      "pre",
      {
        style: {
          fontFamily: "Consolas",
          fontSize: "12",
          height: "320px",
          overflow: "auto",
        },
      },
      // JSON.stringify(Props.airportData, null, 2)
      JSON.stringify(option.value.series, null, 2)
    ),
  });
};

const download = () => {
  if (chart == null || chart.value == null) {
    return null;
  }
  let dataURL = chart.value.getDataURL();
  const elink = document.createElement("a");
  elink.download = "airportData.svg"; // 设置默认文件名
  elink.style.display = "none";
  elink.href = dataURL;
  document.body.appendChild(elink);
  elink.click();
  URL.revokeObjectURL(elink.href); // 释放URL 对象
  document.body.removeChild(elink);
};

const points = computed(() => {
  // let points = new Array();
  // for (let i = 0; i < flowStore.tags.length; i++) {
  //   let tag_arr = flowStore.tags[i].split("_");
  //   if (tag_arr.length == 3) {
  //     if (!points.includes(tag_arr[2])) {
  //       points.push(tag_arr[2]);
  //     }
  //   }
  // }
  // points.sort();
  // return points;
  return [
    "MEXAD",
    "AKDIK",
    "BUPMI",
    "GURET",
    "SAGPI",
    "UBRAB",
    "EKOKA",
    "AKOPI",
    "ATVAX",
    "IDBOR",
    "ELDUD",
    "IGNAK",
    "LUVEN",
    "LADUP",
    "MUMGO",
    "JTG",
    "BOKIR",
  ];
});

const option = computed(() => {
  let a = Props.airportData.airport;

  let ZUUU_DEP = new Array();
  let ZUUU_ARR = new Array();
  let ZUTF_DEP = new Array();
  let ZUTF_ARR = new Array();
  let ZUMY_DEP = new Array();
  let ZUMY_ARR = new Array();
  let YBLZ_DEP = new Array();
  let YBLZ_ARR = new Array();
  let total = new Array();

  for (let i = 0; i < points.value.length; i++) {
    total.push(0);
    let p = points.value[i];
    if (a.ZUUU.type.DEP.point[p]) {
      ZUUU_DEP.push(a.ZUUU.type.DEP.point[p]);
      total[total.length - 1] += a.ZUUU.type.DEP.point[p];
    } else {
      ZUUU_DEP.push(0);
    }
    if (a.ZUUU.type.ARR.point[p]) {
      ZUUU_ARR.push(a.ZUUU.type.ARR.point[p]);
      total[total.length - 1] += a.ZUUU.type.ARR.point[p];
    } else {
      ZUUU_ARR.push(0);
    }
    if (a.ZUTF.type.DEP.point[p]) {
      ZUTF_DEP.push(a.ZUTF.type.DEP.point[p]);
      total[total.length - 1] += a.ZUTF.type.DEP.point[p];
    } else {
      ZUTF_DEP.push(0);
    }
    if (a.ZUTF.type.ARR.point[p]) {
      ZUTF_ARR.push(a.ZUTF.type.ARR.point[p]);
      total[total.length - 1] += a.ZUTF.type.ARR.point[p];
    } else {
      ZUTF_ARR.push(0);
    }
    if (a.ZUMY.type.DEP.point[p]) {
      ZUMY_DEP.push(a.ZUMY.type.DEP.point[p]);
      total[total.length - 1] += a.ZUMY.type.DEP.point[p];
    } else {
      ZUMY_DEP.push(0);
    }
    if (a.ZUMY.type.ARR.point[p]) {
      ZUMY_ARR.push(a.ZUMY.type.ARR.point[p]);
      total[total.length - 1] += a.ZUMY.type.ARR.point[p];
    } else {
      ZUMY_ARR.push(0);
    }
  }

  return {
    tooltip: {
      show: true,
      // trigger: "axis",
      axisPointer: { type: "cross" },
    },
    angleAxis: {
      type: "category",
      data: points.value,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(128,128,128,0.15)",
          type: "dotted",
          cap: "round",
          join: "round",
        },
      },
    },
    radiusAxis: {
      type: "value",
      axisLine: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      axisTick: { show: false },
    },
    polar: {},
    series: [
      {
        name: "ZUUU离港",
        type: "bar", // isBar.value ? "bar" : "line"
        data: ZUUU_DEP,
        coordinateSystem: "polar",
        stack: "x",
        // smooth: true,
        // areaStyle: {},
        itemStyle: { color: "#3498DB" },
      },
      {
        name: "ZUUU进港",
        type: "bar",
        data: ZUUU_ARR,
        coordinateSystem: "polar",
        stack: "x",
        // smooth: true,
        // areaStyle: {},
        itemStyle: { color: "#E67E22" },
      },
      {
        name: "ZUTF离港",
        type: "bar",
        data: ZUTF_DEP,
        coordinateSystem: "polar",
        stack: "x",
        // smooth: true,
        // areaStyle: {},
        itemStyle: { color: "#2ECC71" },
      },
      {
        name: "ZUTF进港",
        type: "bar",
        data: ZUTF_ARR,
        coordinateSystem: "polar",
        stack: "x",
        // smooth: true,
        // areaStyle: {},
        itemStyle: { color: "#F1C40F" },
      },
      {
        name: "ZUMY离港",
        type: "bar",
        data: ZUMY_DEP,
        coordinateSystem: "polar",
        stack: "x",
        // smooth: true,
        // areaStyle: {},
        itemStyle: { color: "#9B59B6" },
      },
      {
        name: "ZUMY进港",
        type: "bar",
        data: ZUMY_ARR,
        coordinateSystem: "polar",
        stack: "x",
        // smooth: true,
        // areaStyle: {},
        itemStyle: { color: "#E74C3C" },
      },
      // {
      //   name: "TOTAL",
      //   type: "line",
      //   data: total,
      //   coordinateSystem: "polar",
      //   // stack: "x",
      //   // step: true,
      //   // areaStyle: {},
      //   // itemStyle: { color: "rgba(128,128,128,0.5)" },
      //   symbol: "none",
      //   lineStyle: { color: "rgba(128,128,128,0.5)" },
      // },
    ],
  };
});

// let autoResizeTimer = null;
// onMounted(() => {
//   autoResizeTimer = setInterval(async () => {
//     if (chart && chart.value) {
//       // console.log("chart.value.resize()");
//       await nextTick();
//       chart.value.resize();
//     }
//   }, 1000);
// });
// onUnmounted(() => {
//   clearInterval(autoResizeTimer);
// });
</script>

<style scoped>
.chart-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 12px 0 12px;
}
</style>
